<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="大会履职"></uni-navbar></view>

		<view class="info-box">
			<view style="text-align: right">
				<view class="info-time" @click="timeChange">
					{{ time }}
					<image class="img time" src="/static/img/icon_46.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="info-title">
				{{ name }}
				<text class="dept" v-if="dept">{{ dept }}</text>
			</view>
			<u-picker v-model="open" mode="selector" :range="range" @confirm="timeConfirm"></u-picker>
		</view>

		<view class="container">
			<u-row class="link-box" gutter="0" align="center">
				<u-col span="4">
					<view class="link-item right bottom" @click="navTo('/pagesB/perform/rule?')">
						<image class="image" src="/static/img/icon_36.png" mode="widthFix"></image>
						<text>会议须知</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item right bottom" @click="navTo('/pagesB/perform/schedule?')">
						<image class="image" src="/static/img/icon_37.png" mode="widthFix"></image>
						<text>会议日程</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item bottom" @click="navTo('/pagesB/perform/file?')">
						<image class="image" src="/static/img/icon_38.png" mode="widthFix"></image>
						<text>文件资料</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item right bottom" @click="planTo('/pagesB/perform/plan?type=seat&')">
						<image class="image" src="/static/img/icon_39.png" mode="widthFix"></image>
						<text>座位安排</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item right bottom" @click="planTo('/pagesB/perform/plan?type=hotel&')">
						<image class="image" src="/static/img/icon_40.png" mode="widthFix"></image>
						<text>住宿安排</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item bottom" @click="planTo('/pagesB/perform/plan?type=dinner&')">
						<image class="image" src="/static/img/icon_41.png" mode="widthFix"></image>
						<text>就餐安排</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item right" @click="planTo('/pagesB/perform/plan?type=car&')">
						<image class="image" src="/static/img/icon_42.png" mode="widthFix"></image>
						<text>用车安排</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item right" @click="planTo('/pagesB/perform/plan?type=all&')">
						<image class="image" src="/static/img/icon_43.png" mode="widthFix"></image>
						<text>会务安排</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="link-item" @click="navTo('/pagesB/perform/sign?')">
						<image class="image" src="/static/img/icon_44.png" mode="widthFix"></image>
						<text>考勤记录</text>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			range: [],
			open: false,
			meetingList: [],
			name: '',
			dept: '',
			startTime: '',
			time: '2021',
			meetingState: ''
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let data = {
				clientCode: this.clientCode,
				pageNum: 1,
				pageSize: 99999,
				remark1: 'dahui',
				hyhdMeeting: {
					clientCode: this.clientCode,
					remark1: 'dahui'
				},
				userId: this.userId,
				curUserID: this.userId
			};
			let url = '/huiyihuodong/hyhd-meeting-user/listMyMeetings';
			let roleCodes = this.userInfo.roleCodes;
			let role = roleCodes.some((item) => {
				return item == 'bangongshi' || item == 'hyhdap';
			});
			if (role) {
				url = '/huiyihuodong/hyhd-meeting/list';
			}
			this.$request(url, data).then((res) => {
				this.meetingList = res.data.records.reverse();
				if (this.meetingList.length == 0) return false;
				let index = this.meetingList.length - 1;
				this.id = this.meetingList[index].id;
				this.name = this.meetingList[index].title;
				this.dept = this.meetingList[index].meetingAddress;
				this.startTime = this.meetingList[index].startTime.split(' ')[0];
				this.time = this.meetingList[index].startTime.slice(0, 4);

				this.range = [];
				this.meetingList.forEach((item) => {
					this.range.push(item.startTime.slice(0, 4));
				});
			});
		},
		timeChange() {
			this.open = !this.open;
		},
		timeConfirm(e) {
			let index = e[0];
			if (this.meetingList.length == 0) return false;
			this.id = this.meetingList[index].id;
			this.name = this.meetingList[index].title;
			this.dept = this.meetingList[index].meetingAddress;
			this.startTime = this.meetingList[index].startTime.split(' ')[0];
			this.time = this.meetingList[index].startTime.slice(0, 4);
		},
		navTo(url) {
			if (this.meetingList.length) {
				uni.navigateTo({
					url: url + 'id=' + this.id + '&name=' + this.name + '&dept=' + this.dept
				});
			} else {
				this.$msg('暂无会议！');
			}
		}
	}
};
</script>

<style lang="scss">
.info-box {
	padding: 30rpx 30rpx 100rpx;

	.info-title {
		margin-bottom: 14rpx;
	}
}

.time {
	width: 30rpx;
}

.link-box {
	margin-top: -120rpx;
	padding: 0;

	.link-item {
		padding: 55rpx 0;
		height: 230rpx;
		font-size: 16px;
		line-height: 32rpx;

		&.left {
			border-left: 0.1rpx solid #f5f7fa;
		}

		&.top {
			border-top: 0.1rpx solid #f5f7fa;
		}

		&.right {
			border-right: 0.1rpx solid #f5f7fa;
		}

		&.bottom {
			border-bottom: 0.1rpx solid #f5f7fa;
		}

		text {
			width: 100%;
		}

		image {
			display: block;
			margin-bottom: 28rpx;
			width: 56rpx;
		}
	}
}
</style>
